<template>
  <div>
    <Header :active="active"></Header>


    <div style="min-height: calc(100vh - 310px);" class="w100 mt-40 pl-160 pr-160 rows" v-loading="loading">
        <div class="w-160 h-308 mr-100" style="border: 1px solid rgba(112, 112, 112, .27)">
            <div class="w100 h-60 rowsc rowsm colfff fs-16 fw-b" style="background-color: #E33636;">{{$route.query.name}}</div>
        </div>
        <div class="w100">
            <div class="w100 rowsb rowsm mb-22" v-for="(item,index) in list" :key="index">
<!--                <router-link to="/surveyDetail">-->
<!--                    <div class="one_overflow w-436 fs-20 col333">{{ item.content }}</div>-->
<!--                </router-link>-->
              <router-link :to="{ path: '/surveyDetail', query: { name: $route.query.name, id: item.id} }" target="_blank">
                <div class="one_overflow w-436 fs-20 col333">{{ item.title }}</div>
              </router-link>
                <div class="fs-16 col888">{{item.createTime}}</div>
            </div>
            <div class="w100 mt-50 rowsc rowsm">
                <!-- <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    @current-change="changePage"
                    >
                </el-pagination> -->
                 <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[6, 12, 20, 30]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>

                <!-- class="red" -->
            </div>
        </div>
    </div>



    <Footer class="mt-60"></Footer>

  </div>
</template>

<script>
import axios from "axios";

export default {
  components: {},
  props: {},
  provide() {
    return {
      iValue: this.iValue
    };
  },
  data() {
    return {
      number: '',
      list: [],
      loading:false,
      // 总条数
      total:0,
       currentPage: 1,
      //请求参数
      param:{
        pageNum: 1,
        pageSize: 6
      }
    };
  },
  watch: {},
  computed: {
    active(){
      let i = 0
      if(this.$route.query.name == '劳动教育概况') i = 1
      if(this.$route.query.name == '政策资讯') i = 2
      if(this.$route.query.name == '劳动教育动态') i = 3
      if(this.$route.query.name == '劳动教育实践基地') i = 5
      this.getPolicyAdvisory()
      return i
    }
  },
  methods: {
    changePage(e){
        console.log(e)
        this.param.pageNum = e
      // this.getPolicyAdvisory()
    },
     handleSizeChange(val) {
      this.param.pageSize = val
      this.getPolicyAdvisory()
    },
     handleCurrentChange(val) {
        this.param.pageNum = val
        this.getPolicyAdvisory()
      },
    getPolicyAdvisory() {
      this.loading = true
      const Axios = axios.create({
        baseURL: this.$apiBaseUrl
      });
      // if(this.$route.query.name == '劳动教育概况')
      if(this.$route.query.name === '政策资讯') {
        Axios.get('/project/prozczx/listNoAccess',{params: this.param})
            .then(response => {
              this.list = response.data.rows;
              this.total = response.data.total
              this.loading = false
            })
            .catch(error => {
              this.loading = false
              console.error('请求失败:', error);
            });
      } else if (this.$route.query.name === '劳动教育概况') {
        this.param.type = 1
        Axios.get('/project/config/listNoAccess',{params: this.param})
            .then(response => {
              this.list = response.data.rows;
              this.total = response.data.total
              this.loading = false
            })
            .catch(error => {
              this.loading = false
              console.error('请求失败:', error);
            });
      } else if (this.$route.query.name === '劳动教育动态') {
        this.param.type = 2
        Axios.get('/project/config/listNoAccess',{params: this.param})
            .then(response => {
              this.list = response.data.rows;
              this.total = response.data.total
              this.loading = false
            })
            .catch(error => {
              console.error('请求失败:', error);
              this.loading = false
            });
      } else if (this.$route.query.name === '劳动教育实践基地'){
        this.param.type = 3
        Axios.get('/project/config/listNoAccess',{params: this.param})
            .then(response => {
              this.list = response.data.rows;
              this.total = response.data.total
              this.loading = false
            })
            .catch(error => {
              console.error('请求失败:', error);
              this.loading = false
            });
      }
    }
  },
  created() {
    this.getPolicyAdvisory()
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
/deep/ .el-pagination {
  // color: #E33636;
}
/deep/.el-pager li.active{
  color: #E33636;
}
/deep/.el-pager li:hover{
  color: #E33636;
}
/deep/ .el-loading-mask{
  color: #E33636;
}
</style>